<template>
    <div class="person">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄：{{ age }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
</template>

<!-- setup语法糖，写在下面的item（data、methods...）会自动交出去给template用，不用手动return了 -->
<!-- 一般情况下，组件名和文件名是一样的。但有时候就想使用不一样的组件名，这时候就需要自定义了。
     在 Vue 3.3 之前，需要使用 vite-plugin-vue-setup-extend 来提供上面功能的支撑。
         1. 使用命令安装：npm -i vite-plugin-vue-setup-extend -D
         2. 在 vite.config.ts 中加入该插件：import VueSetupExtend from 'vite-plugin-vue-setup-extend'
     但是在 Vue 3.3 之后，Vue 提供了 defineOptions 来解决上面的问题（同时该插件失效）。 -->
<script lang="ts" setup name="Person123">
    // data
    // 注意，此时的name、age、tel都不是响应式的
    let name = '张三';
    let age = 18;
    let tel = '13888888888';

    // methods
    function changeName() {
        // 通过按钮确实可以调用到这里，name也改了，但因为name不是响应式的，所以页面不会刷新
        name = 'zhang-san'
    }

    function changeAge() {
        // 通过按钮确实可以调用到这里，age也改了，但因为age不是响应式的，所以页面不会刷新
        age += 1
    }

    function showTel() {
        alert(tel)
    }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding:20px
    }
    button {
        margin: 0 5px;
    }
</style>